<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>成绩详情</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">
	<link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- tab table-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css"
          href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_i0327076nave7b9.css"/>
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
    <style>
        #example_paginate {
            float: right;
        }

        .handle-btn {
            cursor: pointer;
            margin: 0 2px;
        }

        #wrapper {
            padding-left: 0px;
        }

        .navigation {
            border-bottom: 3px solid #edebeb;
        }

        .navigation a:hover {
            color: #0F6AFC;
            border-bottom: 2px solid #01AAED;
        }

        .this {
            color: #01aaed;
            font-weight: bold;
            border-bottom: 2px solid #01AAED;
        }
        [v-cloak] {
			display: none;
		}
    </style>
</head>

<body>

<div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" style=" width:225px;">
                <a class="navbar-brand" href="index.html">无人车管理系统</a>
            </div>
            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">
                 <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> 用户名 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="refereePwd.html"><i class="fa fa-fw fa-gear"></i> 修改密码</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="login.html"><i class="fa fa-fw fa-power-off"></i> 退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            
            <!-- /.navbar-collapse -->
        </nav>

    <div id="page-wrapper">

        <div class="container-fluid">
            <div class="row sss">
                <nav class="navbar navbar-default" role="navigation">
                    <div>
                        <ul class="nav navbar-nav">
                            <li><a href="index.html">首页</a></li>
                            <li class="active"><a href="javascript:;">成绩详情</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="panel ">
                    <div class="panel-heading">
                        <ul class="nav">
                            <li>车队名称：<span v-cloak>{{competitionInfo.teamName}}</span>，<span>跟车裁判：<span v-cloak>{{competitionInfo.refereeName}}</span>，</span>
                            </li>
                            <li>
                                最终成绩：<span v-cloak>{{competitionInfo.totalScore}}</span>分，<span>比赛时间：<span v-cloak>{{competitionInfo.competitionTime}}</span>，</span>
                            </li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <ul class="nav" id="biuuu_city_list" style="width: 100%;">
                                <li>
                                    <div class="panel panel-info">
                                        <div class="panel-heading">
                                            <ul class="nav">
                                                <li style="float: left; "><span
                                                        v-cloak>{{stadiumResult[0].stadiumName}}</span><span
                                                        style="padding-left: 20px;"
                                                        v-cloak>{{stadiumResult[0].time}}</span></li>
                                                <li style="float: right;">
                                                    <div class="btn-group" style="float: right; margin-right: 34px;">
                                                        <span v-cloak>{{stadiumResult[0].totalScore}}</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="panel-body">
                                            <ul class="nav">
                                                <li style="text-align: center;">
                                                    <div class="row" style="padding-bottom: 20px;">
                                                        <div class="col-xs-3 col-sm-3" >比赛场景</div>
                                                        <div class="col-xs-3 col-sm-3">违规扣分</div>
                                                        <div class="col-xs-3 col-sm-3">人工干预记录</div>
                                                        <div class="col-xs-3 col-sm-3">成绩</div>
                                                    </div>
                                                    <div class="row" style="padding-bottom: 20px;" v-cloak v-for="item in stadiumResult[0].scenesResultList">
                                                        <div class="col-xs-3 col-sm-3" data-toggle="modal" data-target="#ScoreModal">{{ item.scenesName }}({{ item.scenesScore }})</div>
                                                        <div class="col-xs-3 col-sm-3">-{{ item.illegalScore }}</div>
                                                        <div class="col-xs-3 col-sm-3">{{ item.manualInterventionCount }}次</div>
                                                        <div class="col-xs-3 col-sm-3">{{ item.scenesResult }}</div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <!-- 2-->
                                <li>
                                    <div class="panel panel-info">
                                        <div class="panel-heading">
                                            <ul class="nav">
                                                <li style="float: left; "><span v-cloak>{{stadiumResult[1].stadiumName}}</span>
                                                	<span style="padding-left: 20px;" v-cloak>{{stadiumResult[1].time}}</span></li>
                                                <li style="float: right;">
                                                    <div class="btn-group" style="float: right; margin-right: 34px;">
                                                        <span v-cloak>{{stadiumResult[1].totalScore}}</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="panel-body">
                                            <ul class="nav">
                                                <li style="text-align: center;">
                                                    <div class="row" style="padding-bottom: 20px;">
                                                        <div class="col-xs-3 col-sm-3">比赛场景</div>
                                                        <div class="col-xs-3 col-sm-3">违规扣分</div>
                                                        <div class="col-xs-3 col-sm-3">人工干预记录</div>
                                                        <div class="col-xs-3 col-sm-3">成绩</div>
                                                    </div>
                                                    <div class="row" style="padding-bottom: 20px;" v-cloak v-for="item in stadiumResult[1].scenesResultList">
                                                        <div class="col-xs-3 col-sm-3">{{ item.scenesName }}({{ item.scenesScore }})</div>
                                                        <div class="col-xs-3 col-sm-3">-{{ item.illegalScore }}</div>
                                                        <div class="col-xs-3 col-sm-3">{{ item.manualInterventionCount }}次</div>
                                                        <div class="col-xs-3 col-sm-3">{{ item.scenesResult }}</div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->

    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="ScoreModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
            </div>
            <div class="modal-body">
                <div class="panel-body">
                    <form class="form-horizontal" id="addform" method="get">
                    	<div class="form-group">
                            <label class="col-sm-8 control-label">两相位丁字路口直行(20分)</label>
                            <label class="col-sm-4 control-label"><span>-15分</span></label>
                        </div>
                    	<div class="form-group">
                    		<div class="col-sm-4">比赛行为记录</div>
                    	</div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">闯红灯(<span>15</span>分)</label>
                            <label class="col-sm-2 control-label"><span class="color">通过</span></label>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">闯红灯(<span>15</span>分)</label>
                            <label class="col-sm-2 control-label"><span class="color">未通过</span></label>
                        </div>
                        <div class="form-group">
                    		<div class="col-sm-4">人工干预记录</div>
                    	</div>
                    	<div class="form-group">
                            <label class="col-sm-4 control-label">时间段~时间段</label>
                            <label class="col-sm-8 control-label"><span>-15分</span></label>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">时间段~时间段</label>
                            <label class="col-sm-8 control-label"><span>-15分</span></label>
                        </div>
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- tab table-->
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/vue/vue-router.js"></script>
<script src="nuget/content/scripts/toastr.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
    var vue = new Vue({
        el: '#page-wrapper',
        data: {
            competitionInfo: {
                teamName: "",
                totalScore:0,
            },
            stadiumResult: {},
            teamId: getQueryString("teamId", window.location.href), //获取teamId;
            scenesData:[],
        },
        mounted: function () {
            this.init();
        },
        methods: {
            init: function () {
                var _self = this;
                $.ajax({
                    type: "get",
                    url: url + '/users/' + adminId + "/teams/" + this.teamId + "/stadiumResults",
                    async: false,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function (request) {
                        request.setRequestHeader("accessToken", accessToken);
                    },
                    success: function (data) {
                        var result = data.result;
                        _self.competitionInfo.teamName = result[0].teamName;
                        _self.competitionInfo.refereeName = result[0].refereeName;
                        _self.competitionInfo.competitionTime = replaceDate(result[0].startTime / 1000);
                        _self.stadiumResult = result;
                        for (var i = 0; i < _self.stadiumResult.length; i++) {
                            _self.stadiumResult[i].time = replaceTime(result[0].startTime / 1000) + "~" + replaceHourTime(result[i].endTime / 1000);
                            _self.competitionInfo.totalScore =_self.competitionInfo.totalScore+_self.stadiumResult[i].totalScore;
                        }

                    }
                });
            },
        },
    });

</script>
</body>

</html>
